// 穿梭表格
import React, { Component } from 'react';
import { Button, Form, Row, Col, Table } from 'antd';
import css from './style.less';

const FormItem = Form.Item;

const styles = {
	but: {
		display: 'block',
		margin: '1em 0',
		width: '100%'
	},
	row: {
		display: 'flex',
		alignItems: 'center'
	},
	col: {
		flexGrow: 0,
		flexShrink: 0,
		width: 'auto'
	}
};

class TransferTable extends Component {

	state = {
		rightSelectedRows: [],
		leftSelectedRows: []
	}

	moveToRight = () => {
		const { leftSelectedRows } = this.state;
		const { onMoveToRight } = this.props;
		this.setState({ leftSelectedRows: [] });
		onMoveToRight(leftSelectedRows);
	}
	moveToLeft = () => {
		const { rightSelectedRows } = this.state;
		const { onMoveToLeft } = this.props;
		this.setState({ rightSelectedRows: [] });
		onMoveToLeft(rightSelectedRows);
	}

	getClassName = record => {
		const { isSelected, rightTableProps: { dataSource }, rowKey } = this.props;
		const disabledName = css.disabled;
		let className = '';
		if (typeof isSelected === 'function') className = isSelected(record) ? disabledName : '';
		else if (dataSource.find(i => i[rowKey] === record[rowKey])) {
			className = disabledName;
		}
		return className;
	}
	getKeys() {
		const { rightSelectedRows, leftSelectedRows } = this.state;
		const { rowKey } = this.props;
		return {
			leftKeys: leftSelectedRows.map(i => i[rowKey]),
			rightKeys: rightSelectedRows.map(i => i[rowKey])
		};
	}

	getSelectFun(name) {
		return (record, selected) => {
			console.log('选择');
			const selectedRows = this.state[name];
			const includes = selectedRows.includes(record);
			if (selected) {
				if (!includes) this.setState({ [name]: selectedRows.concat(record) });
			} else {
				if (includes) this.setState({ [name]: selectedRows.filter(i => i !== record) });
			}
		};
	}

	onRightSelect = this.getSelectFun('rightSelectedRows')
	onLeftSelect = this.getSelectFun('leftSelectedRows')
	onLeftSelectAll = (selected, selectedRows) => {
		this.setState({ leftSelectedRows: selectedRows });
	}
	onRightSelectAll = (selected, selectedRows) => {
		this.setState({ rightSelectedRows: selectedRows });
	}

	render() {
		const { columns, leftLabel, rightLabel, rowKey, resetKeys, leftTable, rightTable, leftTableProps, rightTableProps } = this.props;
		const { leftKeys, rightKeys } = this.getKeys();
		const LeftTable = leftTable || Table;
		const RightTable = rightTable || Table;
		return (
			<Row gutter={16} style={styles.row}>
				<Col span={11}>
					<FormItem label={leftLabel} hasFeedback >
						<LeftTable
							columns={columns}
							size="small"
							rowSelection={{
								onSelect: this.onLeftSelect,
								onSelectAll: this.onLeftSelectAll,
								selectedRowKeys: leftKeys
							}}
							{...leftTableProps}
							rowKey={rowKey}
							rowClassName={this.getClassName}
						/>
					</FormItem>
				</Col>
				<Col span={2} style={styles.col}>
					<Button icon="arrow-right" style={styles.but} onClick={this.moveToRight}>移入</Button>
					<Button icon="arrow-left" style={styles.but} onClick={this.moveToLeft}>移出</Button>
					{resetKeys ? <Button style={styles.but} onClick={resetKeys}>还原</Button> : null}
				</Col>
				<Col span={11}>
					<FormItem label={rightLabel} hasFeedback >
						<RightTable
							columns={columns}
							size="small"
							rowSelection={{
								onSelect: this.onRightSelect,
								onSelectAll: this.onRightSelectAll,
								selectedRowKeys: rightKeys
							}}
							{...rightTableProps}
							rowKey={rowKey}
						/>
					</FormItem>
				</Col>
			</Row>
		);
	}
}

export default TransferTable;
